<template>
  <div class="nnn-contain">
    <el-card>
      <el-form :inline="true" class="demo-form-inline">
        <el-row type="flex" justify="space-around">
          <el-col :span="8">
            <el-form-item label="类别名称">
              <el-input v-model="message"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="inquire">查询</el-button>
              <el-button type="warning" @click="resetData">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="margin10">
      <el-row type="flex" justify="space-around">
        <el-col :span="12" class="margin10">
          <el-tag
            type="info"
            color="#fff"
            class="fonts"
            style="margin-right:50px"
          >类别数量:{{categoryList ? categoryList.length :0}}</el-tag>
          <el-tag type="info" color="#fff" class="fonts">子类别总数:{{sonTotal ? sonTotal :0}}</el-tag>
        </el-col>
        <el-col :span="2">
          <el-button @click="addCategory(1)" type="primary">新增类别</el-button>
        </el-col>
      </el-row>
    </el-card>
    <category :categoryList="categoryList ? categoryList:[] " @change="changeType"/>
    <category-dialog ref="categoryDialog" :type="type" :showDialog.sync="showDialog"/>
  </div>
</template>

<script>
import category from './components/category'
import CategoryDialog from './components/categorydialog'
import { getCategory } from '@/api/trade'

export default {
  name: 'Nnn',
  components: {
    category,
    CategoryDialog
  },
  props: {},
  data() {
    return {
      categoryList: [],
      showDialog: false,
      message: '',
      type: null
    }
  },
  //计算错误为啥？
  computed: {
    sonTotal() {
      if (this.categoryList) {
        return this.categoryList.reduce((total, obj) => {
          return (total += obj.son.length)
        }, 0)
      }
    }
  },
  methods: {
    //控制弹出层显示编辑还是新增
    changeType(type) {
      this.type = type
    },
    //查询
    async inquire() {
      if (this.message.trim()) {
        const res = await this.getCategory()
        if (res) {
          this.$message.success(`查询到${res.length}条数据`)
        } else {
          this.$message.error('暂无数据')
        }
      } else {
        this.$message.warning('请输入查询内容')
      }
    },
    //重置
    async resetData() {
      this.message = ''
      this.getCategory()
    },
    //新增类别
    addCategory(type) {
      this.showDialog = true
      this.type = type
    },
    //获取所有类别以及模糊查询
    async getCategory() {
      const res = await getCategory({
        categoryname_like: this.message || undefined
      })
      this.categoryList = res
      return res
    }
  },
  created() {
    this.getCategory()
  }
}
</script>

<style scoped >
.margin10 {
  margin: 10px 0;
}
.fonts {
  font-size: 16px;
  color: #000;
}
</style>
